<template>
    <div class="header">
        <div class="container">
            <div class="title">
                <slot name="text">
                    欢迎来到易夫子教师人才网！&nbsp&nbsp
                    <img src="../../assets/images/common/positioning_a.png" alt="">
                    南昌
                    <span class="change">[切换城市]</span>
                </slot>
            </div>
            <div class="operation">
                <slot name="login">
                    <span class="sign-btn" @click="goPage('/sign')">免费注册</span>
                    <span class="login-btn" @click="goPage('/Login')">登录</span>
                </slot>
                <div class="fr">
                    <span class="btn">&nbsp&nbsp&nbsp&nbsp</span>
                    <img class="btn" src="../../assets/images/手机.png" alt="">
                    <span class="text btn" style="padding: 0">手机版</span>
                    <img class="btn" src="../../assets/images/question.png" alt="">
                    <span class="text btn"style="padding: 0">帮助中心</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MainHeader",
        methods: {
            goPage(path) {
                this.$router.push({
                    path: path,
                    // query: {
                    //     // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
                    //     t: +new Date()
                    // }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @yellow: #FFBA00;
    .header {
        width: 100%;
        background: #202329;
        .container {
            height: 40px;
            color: #F5F5F5;
            .title {
                font-size: 15px;
                float: left;
                height: 40px;
                line-height: 40px;
                display: table-cell;
                img {
                    vertical-align: middle;
                }
                .change {
                    font-size: 13px;
                    cursor: pointer;
                }
            }
            .operation {
                float: right;
                height: 40px;
                line-height: 40px;
                display: table-cell;
                img {
                    vertical-align: middle;
                }
                .text {
                    font-size: 13px;
                    margin-right: 10px;
                }
                .sign-btn,.login-btn {
                    font-size: 13px;
                    padding: 0 10px;
                    line-height: 24px;
                    display: inline-block;
                    border: 1px solid @yellow;
                    border-radius: 15px;
                    margin-right: 20px;
                    cursor: pointer;
                    &:hover {
                        color: @yellow;
                    }
                }
                .color {
                    color: @yellow;
                }
            }
        }
    }
</style>
